<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/singer1.css">
    <link rel="stylesheet" type="text/css" href="css/css_reset.css">
    <link rel="stylesheet" type="text/css" href="css/header.css">
    <link rel="stylesheet" href="css/footer.css">
    <style>
        .bg {
            width: 1360px;
            height: 400px;
            background-image: url(image/bg.jpg);
            margin: 100px auto;
            position: relative;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <div class="header_top">
                <h1>
                    <a href="#"><img src="https://y.qq.com/mediastyle/yqq/img/logo.png" alt=""></a>
                </h1>
                <ul class="big_nav">
                    <li><a href="#">音乐馆</a></li>
                    <li><a href="#">我的音乐</a></li>
                    <li><a href="#">客户端</a></li>
                    <li><a href="#">开放平台</a></li>
                    <li><a href="#">VIP</a></li>
                </ul>

                <input type="search" placeholder="搜索音乐、MV、歌单、用户">
                <a href="#"><i class="icon"></i></a>
                <a href="#" class="login">
                    <p>登录</p>
                </a>
                <ul class="vip">
                    <li>开通VIP<i></i>
                        <ul class="vip1">
                            <li>开通绿钻豪华版</li>
                            <li>开通付费包</li>
                        </ul>
                    </li>
                </ul>
                <ul class="recharge">
                    <li>充值<i></i>
                        <ul class="recharge1">
                            <li>充值乐币</li>
                            <li>充值饭票</li>
                        </ul>
                    </li>
                </ul>

            </div>
            <div class="header_bottom">
                <ul>
                    <li><a href="/index.html">首页</a></li>
                    <li><a href="/singer1.html">歌手</a></li>
                    <li><a href="/songdisc.html">新碟</a></li>
                    <li><a href="/Ranking_list.html">排行榜</a></li>
                    <li><a href="/classify.html">分类歌单</a></li>
                    <li><a href="/radio_station.html">电台</a></li>
                    <li><a href="/mv.html">MV</a></li>
                    <li><a href="/Digital_album.html">数字专辑</a></li>
                    <li><a href="#">票务</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="bg">
        <div class="singer">
            <h2 class="push_tit">万千歌手 尽在眼前</h2>
            <p class="push_titl">登录查看你的关注歌手</p>
            <button class="push_but">登录</button>
        </div>
    </div>
    <div class="center">
        <ul class="first">
            <li class="one" tabindex="1" checked>热门</li>
            <li tabindex="1"><a href="#">A</a></li>
            <li tabindex="1"><a href="#">B</a></li>
            <li tabindex="1"><a href="#">C</a></li>
            <li tabindex="1"><a href="#">D</a></li>
            <li tabindex="1"><a href="#">E</a></li>
            <li tabindex="1"><a href="#">F</a></li>
            <li tabindex="1"><a href="#">G</a></li>
            <li tabindex="1"><a href="#">H</a></li>
            <li tabindex="1"><a href="#">I</a></li>
            <li tabindex="1"><a href="#">J</a></li>
            <li tabindex="1"><a href="#">K</a></li>
            <li tabindex="1"><a href="#">L</a></li>
            <li tabindex="1"><a href="#">M</a></li>
            <li tabindex="1"><a href="#">N</a></li>
            <li tabindex="1"><a href="#">O</a></li>
            <li tabindex="1"><a href="#">P</a></li>
            <li tabindex="1"><a href="#">Q</a></li>
            <li tabindex="1"><a href="#">R</a></li>
            <li tabindex="1"><a href="#">S</a></li>
            <li tabindex="1"><a href="#">T</a></li>
            <li tabindex="1"><a href="#">U</a></li>
            <li tabindex="1"><a href="#">V</a></li>
            <li tabindex="1"><a href="#">W</a></li>
            <li tabindex="1"><a href="#">X</a></li>
            <li tabindex="1"><a href="#">Y</a></li>
            <li tabindex="1"><a href="#">Z</a></li>
            <li tabindex="1"><a href="#">#</a></li>
        </ul>
        <ul class="second">
            <li class="one" tabindex="1"><a href="#">全部</a></li>
            <li tabindex="1"><a href="#">内地</a></li>
            <li tabindex="1"><a href="#">港台</a></li>

            <li tabindex="1"><a href="#">欧美</a></li>
            <li tabindex="1"><a href="#">日本</a></li>
            <li tabindex="1"><a href="#">韩国</a></li>
        </ul>
        <ul class="third">
            <li class="one" tabindex="1"><a href="#">全部</a></li>
            <li tabindex="1"><a href="#">男</a></li>
            <li tabindex="1"><a href="#">女</a></li>
            <li tabindex="1"><a href="#">组合</a></li>
        </ul>
        <ul class="four">
            <li class="one" tabindex="1"><a href="#">全部</a></li>
            <li tabindex="1"><a href="#">流行</a></li>
            <li tabindex="1"><a href="#">说唱</a></li>
            <li tabindex="1"><a href="#">国风</a></li>
            <li tabindex="1"><a href="#">摇滚</a></li>
            <li tabindex="1"><a href="#">电子</a></li>
            <li tabindex="1"><a href="#">民谣</a></li>
            <li tabindex="1"><a href="#">R&B</a></li>
            <li class="two" tabindex="1"><a href="#" class="two">民族乐</a></li>
            <li class="two" tabindex="1"><a href="#" class="two">轻音乐</a></li>
            <li tabindex="1"><a href="#">爵士</a></li>
            <li tabindex="1"><a href="#">古典</a></li>
            <li tabindex="1"><a href="#">乡村</a></li>
            <li tabindex="1"><a href="#">蓝调</a></li>
        </ul>
    </div>
    <div class="things">
        <ul class="pic">
            <li>
                <dl>
                    <dt>
                        <img src="https://y.qq.com/music/photo_new/T001R500x500M0000025NhlN2yWrP4.jpg?max_age=2592000">
                    <dd>
                        周杰伦
                    </dd>
                    </dt>
                </dl>
            </li>
            <li>
                <dl>
                    <dt>
                        <img src="https://y.qq.com/music/photo_new/T001R500x500M000002J4UUk29y8BY.jpg?max_age=2592000">
                    <dd>
                        薛之谦
                    </dd>
                    </dt>
                </dl>
            </li>
            <li>
                <dl>
                    <dt>
                        <img src="https://y.qq.com/music/photo_new/T001R500x500M000004gGNH91beMrM.jpg?max_age=2592000">
                    <dd>
                        七叔
                    </dd>
                    </dt>
                </dl>
            </li>
            <li>
                <dl>
                    <dt>
                        <img src="https://y.qq.com/music/photo_new/T001R500x500M0000039JTTG0s4SCv.jpg?max_age=2592000">
                    <dd>
                        时代少年团
                    </dd>
                    </dt>
                </dl>
            </li>
            <li>
                <dl>
                    <dt>
                        <img src="https://y.qq.com/music/photo_new/T001R500x500M000002YetSZ06c9c9.jpg?max_age=2592000">
                    <dd>
                        王靖雯不胖
                    </dd>
                    </dt>
                </dl>
            </li>
            <li>
                <dl>
                    <dt>
                        <img src="https://y.qq.com/music/photo_new/T001R500x500M000003LABmP0dTIWp.jpg?max_age=2592000">
                    <dd>
                        不是花火
                    </dd>
                    </dt>
                </dl>
            </li>
            <li>
                <dl>
                    <dt>
                        <img src="https://y.qq.com/music/photo_new/T001R500x500M00000067r4p0wBDDN.jpg?max_age=2592000">
                    <dd>
                        任然
                    </dd>
                    </dt>
                </dl>
            </li>
            <li>
                <dl>
                    <dt>
                        <img src="https://y.qq.com/music/photo_new/T001R500x500M000001BLpXF2DyJe2.jpg?max_age=2592000">
                    <dd>
                        林俊杰
                    </dd>
                    </dt>
                </dl>
            </li>
            <li>
                <dl>
                    <dt>
                        <img src="https://y.qq.com/music/photo_new/T001R500x500M000002yupVT2XEFaA.jpg?max_age=2592000">
                    <dd>
                        IN-K
                    </dd>
                    </dt>
                </dl>
            </li>
            <li>
                <dl>
                    <dt>
                        <img src="https://y.qq.com/music/photo_new/T001R500x500M000001fNHEf1SFEFN.jpg?max_age=2592000">
                    <dd>
                        邓紫棋
                    </dd>
                    </dt>
                </dl>
            </li>

        </ul>
    </div>
    <ul class="name" >
        <li><a href="#">海来阿木</a></li>
        <li><a href="#">郑鱼</a></li>
        <li><a href="#">蓝心羽</a></li>
        <li><a href="#">陈奕迅</a></li>
        <li><a href="#">王忻城</a></li>
        <li><a href="#">李荣华</a></li>
        <li><a href="#">周深</a></li>
        <li><a href="#">阿肆</a></li>
        <li><a href="#">等什么君</a></li>
        <li><a href="#">程响</a></li>
        <li><a href="#">姚六一</a></li>
        <li><a href="#">井胧</a></li>
        <li><a href="#">汪苏泷</a></li>
        <li><a href="#">李宇春</a></li>
        <li><a href="#">莫文蔚</a></li>
        <li><a href="#">五月天</a></li>
        <li><a href="#">刘惜君</a></li>
        <li><a href="#">王力宏</a></li>
        <li><a href="#">张韶涵</a></li>
        <li><a href="#">朴树</a></li>
        <li><a href="#">张学友</a></li>
        <li><a href="#">张远</a></li>
        <li><a href="#">周传雄</a></li>
        <li><a href="#">庄心妍</a></li>
        <li><a href="#">司南</a></li>
        <li><a href="#">刘德华</a></li>
        <li><a href="#">梁静茹</a></li>
        <li><a href="#">宋冬野</a></li>
        <li><a href="#">陈粒</a></li>
        <li><a href="#">张碧晨</a></li>
        <li><a href="#">蔡健雅</a></li>
        <li><a href="#">周传雄</a></li>
        <li><a href="#">赵雷</a></li>
        <li><a href="#">队长</a></li>
        <li><a href="#">张杰</a></li>
        <li><a href="#">张远</a></li>
        <li><a href="#">杨宗纬</a></li>
        <li><a href="#">张国荣</a></li>
        <li><a href="#">马嘉祺</a></li>
        <li><a href="#">陈雪凝</a></li>
        <li><a href="#">王源</a></li>
        <li><a href="#">王俊凯</a></li>
        <li><a href="#">易烊千玺</a></li>
        <li><a href="#">刘宇宁</a></li>
        <li><a href="#">宋亚轩</a></li>
        <li><a href="#">萧亚轩</a></li>
        <li><a href="#">岳云鹏</a></li>
        <li><a href="#">张菲</a></li>
    </ul>
    <div class="footerbodyer">
        <div>
            <div class="footerleft">
                <div>
                    <h4>下载QQ音乐客户端</h4>
                </div>
                <div>
                    <ul class="icons">
                        <a href="">
                            <li>
                                <p>PC版</p>
                            </li>
                        </a>
                        <li>
                            <p>Mac版</p>
                        </li>
                        <li>
                            <p>Android版</p>
                        </li>
                        <li>
                            <p>iphone版</p>
                        </li>
                    </ul>
                </div>
                <div>
                    <h3>开放平台</h3>
                    <ul class="icons1">
                        <li><a href="">QQ音乐开放平台</a></li>
                        <li><a href="">腾讯音乐人</a></li>
                    </ul>
                </div>
            </div>
            <div class="footermiddle">
                <div>
                    <h4>特色产品</h4>
                </div>
                <div>
                    <ul class="iconss">
                        <li>
                            <p>全民k歌</p>
                        </li>
                        <li>
                            <p>Super&nbsp;Sound</p>
                        </li>
                        <li>
                            <p>Qplay</p>
                        </li>
                        <li>
                            <p>Fan直播伴侣</p>
                        </li>
                    </ul>
                </div>
                <div>
                    <h3>TME集团官网</h3>
                    <ul class="icons2">
                        <li><a href="">腾讯音乐</a></li>
                    </ul>
                </div>
            </div>
            <div class="footerright">
                <h4>合作链接</h4>
                <div class="iconsss">
                    <ul>
                        <li><a href="">CJ&nbsp;ENM</a></li>
                        <li><a href="">最新版QQ</a></li>
                        <li><a href="">QQ浏览器</a></li>
                        <li><a href="">企鹅FM</a></li>
                    </ul>
                    <ul>
                        <li><a href="">腾讯视频</a></li>
                        <li><a href="">腾讯社交广告</a></li>
                        <li><a href="">腾讯微云</a></li>
                        <li><a href="">智能电视网</a></li>
                    </ul>
                    <ul>
                        <li><a href="">手机QQ空间</a></li>
                        <li><a href="">电脑管家</a></li>
                        <li><a href="">腾讯云</a></li>
                        <li><a href="">当贝市场</a></li>
                    </ul>
                </div>
            </div>
            <div class="footerfooter">
                <ul class="footerlist1">
                    <li><a href="">关于腾讯|</a></li>
                    <li><a href="">About&nbsp;Tencent|</a></li>
                    <li><a href="">服务条款|</a></li>
                    <li><a href="">用户服务协议|</a></li>
                    <li><a href="">隐私政策|</a></li>
                    <li><a href="">权利声明|</a></li>
                    <li><a href="">广告服务|</a></li>
                    <li><a href="">腾讯招聘|</a></li>
                    <li><a href="">客服中心|</a></li>
                    <li><a href="">网站导航</a></li>
                </ul>
                <h5>Copyright © 1998 - 2021 Tencent. All Rights Reserved.</h5>
                <h5>腾讯公司 版权所有 网络文化经营许可证:<a href="">粤网文[2018]6725-2386号</a></h5>
            </div>
        </div>

    </div>

</body>

</html>